(function(window) {

    "use strict"
    //蛇的代码
    //分析设对象
    //    属性
    //        1.width: 蛇一节宽度
    //        2.height: 蛇一节高度
    //        3.headBgc: 蛇头的背景颜色
    //        4.bodyBgc: 蛇身体的背景颜色
    //        5.body: 蛇的每一节的信息
    //通过数组得知蛇的长度 数组中的每一节是一个对象，通过这个对象可以得知一节的坐标信息
    //  数组中的第一个永远是蛇头
    //       [
    //        {x: 2, y: 0}蛇头的坐标信息
    //        {x: 1, y: 0}蛇身体的坐标信息
    //        {x: 0, y: 0}蛇尾的坐标信息
    //       ]

    //方法 : render : 把蛇创建出来添加到地图中
    //       move: 让蛇移动起来
    //       两种方式: 
    //              1. 修改蛇的每一节坐标，需要for循环修改每一节的坐标
    //创建蛇对象
    function Snake(options) {
        options = options || {};
        this.width = options.width || 20;
        this.height = options.height || 20;
        this.headBgc = options.headBgc || 'red';
        this.bodyBgc = options.bodyBgc || 'green';
        //默认往右走 蛇的移动方向
        this.direction = options.direction || 'right';
        this.body = options.body || [{
                x: 2,
                y: 0
            }, //蛇头的坐标信息
            {
                x: 1,
                y: 0
            }, //蛇身体的坐标信息
            {
                x: 0,
                y: 0
            } //蛇尾的坐标信息
        ];
    };
    //
    Snake.prototype.render = function(target) {
        //把蛇创建出来添加到地图中

        //for循环遍历 一个个创建 因为有多个
        for (var i = 0; i < this.body.length; i++) {
            //this.body[i]  获取到每一节的坐标信息
            //用span表示蛇的每一节 来和食物div区分开
            var span = document.createElement('span');
            //设置样式
            span.style.width = this.width + 'px';
            span.style.height = this.height + 'px';
            //给蛇头设置专门的背景
            // if (i == 0) {
            //     //创建的span元素就为蛇头
            //     span.style.backgroundColor = this.headBgc;
            // } else {
            //     //蛇身体
            //     span.style.backgroundColor = this.bodyBgc;
            // }
            i == 0 ? span.style.backgroundColor = this.headBgc : span.style.backgroundColor = this.bodyBgc;
            i == 0 ? span.style.zIndex = 999 : span.style.zIndex = 1;
            //设置位置
            span.style.position = 'absolute';
            span.style.left = this.body[i].x * this.width + 'px';
            span.style.top = this.body[i].y * this.height + 'px';
            //添加到地图中
            target.appendChild(span);
        }
    };
    //蛇移动
    //参数food是食物的实例对象 需要拿到食物的坐标来判断蛇头是否吃到了食物
    Snake.prototype.move = function(target, food) {
        //food为食物的实例对象 可以拿到食物的x y轴
        //1.复制当前蛇头的坐标
        var newHead = {
            x: this.body[0].x,
            y: this.body[0].y
        };
        // 2.根据蛇的移动方向修改复制出来的蛇头的坐标
        switch (this.direction) {
            case 'right':
                //蛇往右走, x+1
                newHead.x++;
                break;
            case 'left':
                //蛇往左走, x-1
                newHead.x--;
                break;
            case 'up':
                //蛇往上走, y-1
                newHead.y--;
                break;
            case 'down':
                //蛇往下走, y+1
                newHead.y++;
                break;
        }

        //蛇吃食物的逻辑
        //蛇吃食物
        //判断食物的坐标和蛇头坐标是否重合了 (x,y都要相同)
        if (newHead.x == food.x && newHead.y == food.y) {
            //蛇吃到食物了
            //1.把地图中的食物删掉，重新渲染一个食物在地图中
            var div = target.querySelector('div');
            //蛇碰到了食物 就把食物对象删除
            target.removeChild(div);
            //最后重新渲染把食物重新渲染到地图中
            food.render(target);
        } else {
            //2.把蛇的长度加长一节
            //4.删除蛇尾 蛇移动的时候且没有吃到食物才需要删除
            this.body.pop();
        }
        //3.把newHead添加到数组中去作为新蛇头
        this.body.unshift(newHead);
        //5.渲染之前要把地图中以前的蛇每一节找到并移除
        //找到地图中的span元素
        var spans = target.querySelectorAll('span'); //spans为维数组需要找到所有的span
        for (var i = 0; i < spans.length; i++) {
            target.removeChild(spans[i]);
        }
        //6.蛇坐标发生改变 需要重新调用一下render
        this.render(target);
    };
    //实例对象 蛇
    /* var snake = new Snake(); */
    //把蛇对象渲染到地图上
    /*  snake.render(map); */
    //开启定时器 一直调用move()方法
    /*  setInterval(function() {
         snake.move(map);
     }, 200); */


    //把snake暴露出去
    window.Snake = Snake;
})(window);